import React from 'react';
import { Toast, } from 'antd-mobile';
import Player from 'griffith'
import PlayerContainer, {MessageContext} from 'griffith'
import Audio from "./AudioPlay";

var ws=null

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            sources: {
                sd: {
                    play_url: 'http://qiniu.schhtc.cn/1.mkv',
                },
            },
            id: props.match.params.id,
            type: props.match.params.type,
            url: '',
            isPlay: false,
            data:{}
        }
        this.timer=null
    }
	componentDidMount(){
        document.title = ''
        this.getData()
    }
	componentWillUnmount(){
        ws.close()
        clearInterval(this.timer)
        console.log("Connection closed.");
    }
    getData(){
        global.Ajax.hhtc_request("product/content_detail",{id: this.state.id,type: this.state.type}).then(data=>{
			if(data.code===1){
                var sources={
                    sd: {
                        play_url: data.data.url,
                    },
                }
				this.setState({
                    sources:sources,
                    url: data.data.url,
                    data:data.data,
                },()=>{
                    this.playAudio()
                    var _this=this;
                    ws = new WebSocket("wss://yikan.cdhhtc.cn/websocket");
                    ws.onopen = function(evt) {  //绑定连接事件
                　　    console.log("Connection open ...");
                        _this.timer=setInterval(() => {
                            ws.send("HeartBeat");
                        }, 50000);
                    };
                    ws.onmessage = function(evt) {//绑定收到消息事件
                    　　console.log( "Received Message: " + evt.data);
                        var txt=localStorage.getItem('token')+','+_this.state.id+',1'
                        ws.send(txt);
                    };
                })
			}
		})
    }
    // 该视频已准备好开始播放
    onCanPlay(){
        var video = document.getElementById('video123');
        video.click=()=>{
            console.log(video.paused);
        }
    }
    // 当前播放位置改变时执行
    onTimeUpdate(){
        var video = document.getElementById('video123');
        var timeDisplay;
        //用秒数来显示当前播放进度
        timeDisplay = Math.floor(video.currentTime);
        // if(this.state.isPlay){
        //     var txt=localStorage.getItem('token')+','+this.state.id+',2'  //暂停播放
        //     ws.send(txt);
        // }else{
        //     var txt=localStorage.getItem('token')+','+this.state.id+',3'  //继续播放
        //     ws.send(txt);
        // }
        if (video.currentTime === video.duration) {
            ws.close()
            clearInterval(this.timer)
            console.log("关闭心跳");
        }
    }
    // 播放视频
    playAudio = () => {
        var video = document.getElementById('video123');
        video.play();
        this.setState({
          isPlay: true,
        });
    };
    // 暂停视频
    pauseAudio = () => {
        var video = document.getElementById('video123');
        video.pause();
        this.setState({
          isPlay: false,
        });
    };
    // 播放、暂停音频
    play(){
        if(this.state.isPlay){  
            this.pauseAudio()  //暂停播放
            var txt=localStorage.getItem('token')+','+this.state.id+',2'
            ws.send(txt);
        }else{
            this.playAudio()  //继续播放
            var txt=localStorage.getItem('token')+','+this.state.id+',3'
            ws.send(txt);
        }
    }
	render(){
		return(
			<div className='video'>
                {/* <Player ref='video' cover={this.state.img} id='video123' sources={this.state.sources} /> */}
                {this.state.url!==''&&<video id='video123' width="100%" height="auto" controls="controls" onCanPlay={this.onCanPlay.bind(this)} onTimeUpdate={this.onTimeUpdate.bind(this)}>
                    {/* <source src="movie.ogg" type="video/ogg" /> */}
                    <source src={this.state.url} type="video/mp4" />
                </video>}
                <p className='title'>{this.state.data.title}</p>
                <p className='video_play_pause_btn' onClick={this.play.bind(this)}></p>
			</div>
		)
	}
}
